<template>
	<t-modal
		title="高级查询"
		titleIcon="search"
		width="700px"
		:visible="visible"
		@ok="search"
		@cancel="reset"
		okText="查询"
		cancelText="清空"
		confirmBtnIcon="search"
		cancelBtnIcon="reload">
		<a-spin tip="Loading..." :spinning="false">
			<a-form layout="inline" :form="form">
				<div class="flex" v-for="(k, index) in form.getFieldValue('keys')" :key="k">
					<div class="cqItem">
						<div class="cqItemTitle" v-if="index === 0">方式</div>
						<a-form-item>
							<a-select v-decorator="[`join[${k}]`, { initialValue: 'and' }]" style="width: 70px;">
								<a-select-option value="and">
									并且
								</a-select-option>
								<a-select-option value="or">
									或者
								</a-select-option>
							</a-select>
						</a-form-item>
					</div>

					<div class="cqItem">
						<div class="cqItemTitle" v-if="index === 0">左括号</div>
						<a-form-item>
							<a-select v-decorator="[`lb[${k}]`, { initialValue: '' }]" style="width: 55px;">
								<a-select-option value="">
									无
								</a-select-option>
								<a-select-option value="(">
									(
								</a-select-option>
							</a-select>
						</a-form-item>
					</div>

					<div class="cqItem">
						<div class="cqItemTitle" v-if="index === 0">字段</div>
						<a-form-item>
							<a-select v-decorator="[`field[${k}]`]" style="width: 110px;">
								<a-select-option v-for="item in fieldData" :key="item.dataIndex">
									{{ item.title }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</div>

					<div class="cqItem">
						<div class="cqItemTitle" v-if="index === 0">条件</div>
						<a-form-item>
							<a-select v-decorator="[`op[${k}]`, { initialValue: 'contains' }]" style="width: 110px;">
								<a-select-option v-for="item in condition" :key="item.value">
									{{ item.text }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</div>

					<div class="cqItem">
						<div class="cqItemTitle" v-if="index === 0">数值</div>
						<a-form-item>
							<a-input v-decorator="[`value[${k}]`]" style="width: 165px;" />
						</a-form-item>
					</div>

					<div class="cqItem">
						<div class="cqItemTitle" v-if="index === 0">右括号</div>
						<a-form-item>
							<a-select v-decorator="[`rb[${k}]`, { initialValue: '' }]" style="width: 55px;">
								<a-select-option value="">
									无
								</a-select-option>
								<a-select-option value=")">
									)
								</a-select-option>
							</a-select>
						</a-form-item>
					</div>

					<div class="cqItem operation">
						<div class="cqItemTitle" v-if="index === 0">操作</div>
						<a-icon v-if="index === 0" type="plus" @click="add" />
						<a-icon v-else type="minus" :disabled="form.getFieldValue('keys').length === 1"
							@click="() => remove(k)" />
					</div>
				</div>
			</a-form>
		</a-spin>
		
	</t-modal>
</template>

<script>
	let id = 0;
	export default {
		name: "CombinedQueryModal",
		props: {
			visible: {
				type: Boolean,
			},
			fieldData: {
				type: Array
			}
		},
		data() {
			return {
				condition: [{
					text: "包含",
					value: "contains"
				}, {
					text: "等于",
					value: "equal"
				}, {
					text: "不等于",
					value: "notequal"
				}, {
					text: "大于",
					value: "greater"
				}, {
					text: "大于或等于",
					value: "greaterorequal"
				}, {
					text: "小于",
					value: "less"
				}, {
					text: "小于或等于",
					value: "lessorequal"
				}, {
					text: "以...开头",
					value: "beginwith"
				}, {
					text: "以...结尾",
					value: "endwith"
				}],
				advanceFilter: []
			};
		},
		beforeCreate() {
			this.form = this.$form.createForm(this, {
				name: 'dynamic_form_item'
			});
			this.form.getFieldDecorator('keys', {
				initialValue: [],
				preserve: true
			});
			const keys = this.form.getFieldValue('keys');
			const formData = {
				keys: keys.concat(id++),
			}
			this.form.setFieldsValue(formData);
		},
		methods: {
			remove(k) {
				const {
					form
				} = this;
				const keys = form.getFieldValue('keys');
				if (keys.length === 1) {
					return;
				}
				form.setFieldsValue({
					keys: keys.filter(key => key !== k),
				});
			},
			add() {
				const {
					form
				} = this;
				const keys = form.getFieldValue('keys');
				const formData = {
					keys: keys.concat(id++),
				}
				form.setFieldsValue(formData);
			},
			reset(e) {
				if (e.target.nodeName === "BUTTON") {
					this.$emit("refresh", JSON.stringify([]))
				} else {
					this.$emit("update:visible", false)
				}
				this.form.resetFields();
				const keys = this.form.getFieldValue('keys');
				const formData = {
					keys: keys.concat(id++),
				}
				this.form.setFieldsValue(formData);
				this.advanceFilter = [];
			},
			search(e) {
				this.form.validateFields((err, values) => {
					if (!err) {
						const {
							keys,
							join,
							lb,
							field,
							op,
							value,
							rb
						} = values;
						this.advanceFilter = []
						keys.forEach(i => {
							this.advanceFilter.push({
								join: join[i] || "",
								lb: lb[i] || "",
								field: field[i] || "",
								op: op[i] || "",
								value: value[i] || "",
								rb: rb[i] || ""
							})
						})
						this.$emit("refresh", JSON.stringify(this.advanceFilter))
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/ .ant-modal-body {
		overflow: auto !important;
		height: 160px !important;
		padding: 4px 14px 4px !important;
	}

	.cqItem {
		padding: 0 5px;
		.cqItemTitle{
			font-weight: bold;
			padding: 5px 0;
		}
	}

	.operation {
		white-space: nowrap;
		display: flex;
		flex-direction: column;
		width: 38px;
		i {
			margin-top: 12px;
		}
	}
	.ant-form-inline .ant-form-item{
		margin: 0 !important;
	}
	
	/deep/ .ant-select{
		font-size: 12px !important;
	}
	
	/deep/ .ant-btn .anticon{
		vertical-align: -0.2em !important;
	}
	
</style>
